<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			section{
				width: 100%;
				height: 400px;
				background-color: white;
			}
		.yuan0{
			 width: 200px;
			    height: 200px;
			    background-color:red;
			    border-radius: 100px 100px 100px 100px;
				float: left;
				margin: 50px;
		}
		.yuan1{
			 width: 200px;
			    height: 100px;
			    background-color:green;
			    border-radius: 100px 100px 0 0;
				float: left;
				margin-top: 150px;
		}
		.yuan2{
			 width: 100px;
			    height: 200px;
			    background-color:pink;
			    border-radius: 100px 0 0 100px;
				float: left;
				margin: 50px;
		}
		.yuan3{
			 width: 200px;
			    height: 200px;
			    background-color:grey;
			    border-radius: 200px 0 0 0;
				float: left;
				margin: 50px;
		}
		.yuan4{
			 width: 10px;
			    height: 200px;
			    background-color:grey;
			    border-radius: 100px 0 0 0;
			    border-top-left-radius:100% ;
				float: left;
				margin: 50px;
		}
		.yuan6{
			 width: 200px;
			    height: 200px;
			    background-color:white;
			    border-radius:  100% 100% 100% 100%;
			    border: solid 10px blue;
				float: left;
				margin: 50px;
		}
		.yuan7{
			 width: 100px;
			    height: 200px;
			    background-color:green;
			    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
				float: left;
				margin: 50px;
		}
		</style>
	</head>
	<body>
		<section>
			<div class="yuan0"></div>
			<div class="yuan1"></div>
			<div class="yuan2"></div>
			<div class="yuan3"></div>
			<div class="yuan4"></div>
			<div class="yuan5"></div>
			<div class="yuan6"></div>
			<div class="yuan7"></div>
		</section>
	</body>
</html>
